<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
  <head>
    <title>TufteGraph: beautiful charts with jQuery</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="raphael.js"></script>
    <script type="text/javascript" src="jquery.enumerable.js"></script>
    <script type="text/javascript" src="jquery.tufte-graph.js"></script>
    <link rel="stylesheet" href="tufte-graph.css" type="text/css" media="screen" charset="utf-8" />

    <style>
      body { font-family: georgia; font-size: 14px }
      #container {
        margin: 0 auto;
        width: 730px;
      }
      .download {
        float: right;
        font-size: 1.5em;
      }
      .footer {
        width: 100%;
        text-align: center;
        color: #999999;
        font-size: 0.8em;
        margin-top: 30px;
      }

      
      .intro { font-size: 1.4em; }
      .differences { clear: both; }

      span.doc { color: green; font-weight: bold; }
      a { color: black; }
      a:visited { color: gray; }
      .example { float: left; }
      h2 { clear: both; }

      .awesome .graph-header { width: 370px; }
      .sales   .graph-header { width: 310px; }

      .sales { margin-left: 20px; }
      li { margin-bottom: 3px; }
    </style>

    <script type="text/javascript">
      $(document).ready(function () {
        jQuery('#awesome-graph').tufteBar({
          data: [
            [1.0, {label: 'Dog'}],
            [1.3, {label: 'Raccoon'}],
            [3.6, {label: 'Albatross'}],
            [4.0, {label: 'Panda'}],
            [5.2, {label: 'Tiger'}],
            [7.0, {label: 'Raptor'}]
          ],
          barWidth: 0.8,
          barLabel:  function(index) { return this[0] + 'x' },
          axisLabel: function(index) { return this[1].label },
          color:     function(index) { return ['#E57536', '#82293B'][index % 2] }
        });

        jQuery('#stacked-graph').tufteBar({
          data: [
            [[1.5, 1.0, 0.51], {label: '2005'}],
            [[2.0, 1.03, 0.6], {label: '2006'}],
            [[2.4, 0.9,  2.0], {label: '2007'}],
            [[1.5, 2.6, 0.45], {label: '2008'}]
          ],
          barLabel:  function(index) {
            amount = ($(this[0]).sum() * 10000).toFixed(0);
            return '$' + $.tufteBar.formatNumber(amount);
          },
          axisLabel: function(index) { return this[1].label },
          legend: {
            data: ["North", "East", "West"]
          }
        });
      });
    </script>
  </head>
  <body>
    <div id="container">
      <div class="download">
        Download (<a href="http://github.com/xaviershay/tufte-graph/tarball/master">tarball</a> | <a href="http://github.com/xaviershay/tufte-graph/zipball/master">zip</a>)
      </div>
    <h1>TufteGraph</h1>
    <p class='intro'><strong>Make pretty graphs with javascript</strong>, using <a href="http://jquery.com">jQuery</a></p>
    <div class='example awesome'>
      <div class='graph-header'>
        <h3>Animal awesomeness</h3>
        <p>Measured by standard combo multiplier</p>
      </div>
      <div id='awesome-graph' class='graph' style='width: 370px; height: 200px;'></div>
    </div>  
    <div class='example sales'>
      <div class='graph-header'>
        <h3>Sales by region</h3>
        <p>Total revenue per year</p>
      </div>
      <div id='stacked-graph' class='graph' style='width: 270px; height: 200px;'></div>
    </div>  

    <p class='differences'>It is different from other javascript charting libraries because:</p>
    <ul>
      <li>Configuration is by dynamic functions, allowing for a really compact API (very few options)</li>
      <li>Non-core layout is done via CSS rather than code</li>
    </ul>

    <h2>Introduction</h2>
    <object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=2655244&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=2655244&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object><br />(<a href="http://vimeo.com/2655244">Introduction to TufteGraph</a> - if your eyes aren't that good, here's a <a href="http://vimeo.com/download/video:86941519?e=1230521577&h=294ad6507b3e20c0bf7580fae7fa1d3e&uh=e356ab5ee762da2d68e3e494b2631364">high-res version</a>)
    <h2>API</h2>
    
<pre><code>jQuery(document).ready(function () {
  jQuery('#awesome-graph').tufteBar({
    data: [
      <span class="doc">// First element is the y-value
      // Other elements are arbitary - they are not used by the lib
      // but are passed back into callback functions</span>
      [1.0, {label: 'Dog'}],
      [1.3, {label: 'Raccoon'}],
      // etc...

      <span class="doc">// For stacked graphs, pass an array of non-cumulative y values</span>
      [[1.5, 1.0, 0.51], {label: '2005'}]
    ],

    <span class="doc">// Any of the following properties can be either static values 
    // or a function that will be called for each data point. 
    // For functions, 'this' will be set to the current data element, 
    // just like jQuery's $.each

    // Bar width in arbitrary units, 1.0 means the bars will be snuggled
    // up next to each other</span>
    barWidth: 0.8, 

    <span class="doc">// The label on top of the bar - can contain HTML
    // formatNumber inserts commas as thousands separators in a number</span>
    barLabel:  function(index) { 
      return $.tufteBar.formatNumber(this[0]) + 'x' 
    }, 

    <span class="doc">// The label on the x-axis - can contain HTML</span>
    axisLabel: function(index) { return this[1].label }, 

    <span class="doc">// The color of the bar</span>
    color:     function(index) { 
      return ['#E57536', '#82293B'][index % 2] 
    },

    <span class="doc">// Stacked graphs also pass a stackedIndex parameter</span>
    color:     function(index, stackedIndex) { 
      return ['#E57536', '#82293B'][stackedIndex % 2] 
    },

    <span class="doc">// Alternatively, you can just override the default colors and keep
    // the built in color functions</span>
    colors: ['#82293B', '#E57536', '#FFBE33'],
 
    <span class="doc">// Legend is optional</span>
    legend: {
      <span class="doc">// Data can be an array of any type of object, but the default
      // formatter works with strings</span>
      data: ["North", "East", "West"],

      <span class="doc">// By default, the colors of the graph are used</span>
      color: function(index) { 
        return ['#E57536', '#82293B'][index % 2] 
      },

      <span class="doc">// You can customize the element label - can contain HTML</span>
      label: function(index) { return this }
    }
  });
});
</code></pre>
  <p>That's it. Have a look at the <a href='test/integration.html'>integration tests</a> for a few combinations.</p>
  <h2>Hot Tips</h2>
  <ul>
    <li>You need to be using <code><a href="http://jquery.com">jQuery</a></code> and also the jQuery enumerable plugin (included). View source on this page if you don't quite get it.</li>
    <li>By default your graph won't be that pretty because it needs to be styled. I recommend <code>tufte-graph.css</code> as a good starting point.</li>
    <li>Find beautiful colors for your graphs at <a href="http://www.colourlovers.com/">ColourLovers</a>.</li>
    <li>I have tested this in Firefox 3 and Safari 3 and nothing else. Buyer beware.</li>
    <li>Read Tufte's <a href="http://books.google.com.au/books?id=JNoBAAAACAAJ">The Visual Display of Quantitative Information</a>, it'll blow your mind. Your graphs will never be the same again.</li>
    <li><a href="mailto:contact@rhnh.net">Email me</a> the cool graphs you make, I really dig graphs.</li>
    <li>If you're going to make changes to this library, please <a href="http://github.com/xaviershay/tufte-graph">fork on github</a> and share the love.</li>
  </ul>  
  <div class="footer">
    <p>TufteGraph by <a href="http://rhnh.net">Xavier Shay</a> - MIT License</p>
  </div>
  </div>
  <a href="http://github.com/xaviershay/tufte-graph"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub" /></a>
  </body>
</html>
